<template>
  <div>
    <div class="app-container">
      <el-form label-width="80px" inline>
        <el-form-item label="工单编号">
          <el-input palceholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button :model="form" type="primary" @click="seach"><i class="el-icon-search" />查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="app-container">
      <el-card shadow="always">
        <el-button type="primary" class="config1" icon="el-icon-plus" @click="add">新建</el-button>
      </el-card>
      <el-table style="width: 100%" :data="list">
        <el-table-column
          label="序号"
          type="index"
        />
        <el-table-column
          prop="name"
          label="合作商名称"
        />
        <el-table-column
          prop="account"
          label="账号"
        />
        <el-table-column
          prop="vmCount"
          label="设备数量"
        />
        <el-table-column
          prop="ratio"
          label="分成比例"
        /><el-table-column
          prop="contact"
          label="联系人"
        /><el-table-column
          prop="account"
          label="联系电话"
        />
        <el-table-column
          label="操作"
        >
          <template #default="{row}">
            <el-button type="text" @click="reset(row.id)">重置密码</el-button>
            <el-button type="text" @click="search(row)">查看详情</el-button>
            <el-button type="text" @click="edit(row)">修改</el-button>
            <el-button type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <addParent ref="addParent" />
      <seachParent ref="seachParent" />
      <editparent ref="editparent" />
    </div>
  </div>
</template>

<script>
import { getParentList, resetPwd, delParent, searchParent } from '@/api/partener'
import addParent from './components/add.vue'
import seachParent from './components/seach.vue'
import editparent from './components/edit.vue'

export default {
  name: 'PartnerManagement',
  components: {
    addParent,
    seachParent,
    editparent
  },

  data() {
    return {
      list: [],
      params: {
        pageIndex: 1,
        pageSize: 1000,
        name: ''
      },
      form: {}
    }
  },

  mounted() {
    this.getParent()
  },

  methods: {
    async getParent() {
      const res = await getParentList(this.params)
      // console.log(res.currentPageRecords)
      this.list = res.currentPageRecords
    },
    add() {
      this.$refs.addParent.visible = true
    },
    async reset(id) {
      // console.log(id)
      await this.$confirm('确定要重置密码', 'tipps', {
        type: 'warning'
      })
      await resetPwd(id)
      this.$message.success('成功')
      this.getParent()
    },
    async search(row) {
      this.$refs.seachParent.list = row
      this.$refs.seachParent.visible = true
    },
    edit(row) {
      // console.log(111)
      this.$refs.editparent.form = { ...row }
      this.$refs.editparent.visible = true
    },
    async del(id) {
      await this.$confirm('确定删除吗', 'tips', {
        type: 'warning'
      })
      await delParent(id)
      this.$message.success('成功')
      this.getParent()
    },
    async seach() {
      const res = await searchParent(this.params)
      this.form = res
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form{
  // width: 1159px;
  height: 64px;
  padding-top: 14px;
  background-color: #fff;
  border:none
}
.el-icon-search{
  margin-right: 7px;
}
.page{
  height: 100px;
  line-height: 100px;
  background-color: #fff;
  display: flex;
  color:#dbdfe5;
  font-size: 20px;
  padding-left: 20px;
  .left{
    span{
      margin-right: 5px;
    }
  }
  .right{
    margin-left: 750px;
   ::v-deep .el-button{
      margin-left: 10px;
      background-color: #d5ddf8;
      border: none;
      color:#606266
       }

  }
}
.config1{
  background-color: #ff893b;
  color:#fff;
  border:none;
  cursor: pointer;
}
</style>
